<template>
  <div>
    <el-drawer
      :title="$t('message.ttxq')"
      :visible.sync="isShowModal"
      size="60%"
    >
      <div class="doumee-filter">
        <div class="info_li"><span>{{ $t('message.ttmc') }}：</span>{{ teamInfo.teamName }}</div>
        <div class="info_li"><span>{{ $t('message.xxdz') }}：</span>{{ teamInfo.addr }}</div>
        <div class="info_li">
          <span>{{ $t('message.glyxx') }}：</span>{{ teamInfo.adminName }}
        </div>
        <div class="info_li"><span>{{ $t('message.qyje') }}：</span>{{ teamInfo.amot }}</div>
        <div class="info_li"><span>{{ $t('message.ye') }}：</span>{{ teamInfo.zhye }}</div>
        <div class="info_li">
          <span>{{ $t('message.tthykklx') }}：</span>{{ teamInfo.cardType }}
        </div>
        <div class="info_li">
          <span>{{ $t('message.yyzz') }}：</span>
          <el-image
            fit="contain"
            :src="teamInfo.yyzzUrl"
            :preview-src-list="[teamInfo.yyzzUrl]"
          />
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('message.tthy')" name="1">
          <div class="doumee-table-buttons">
            <el-button type="primary" @click="inBatch">{{ $t('message.pldr') }}</el-button>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <el-table-column
              align="center"
              :label="$t('message.hykh')"
              prop="cardNo"
              min-width="120"
              sortable
            />
            <el-table-column :label="$t('message.memberInfo')" min-width="200" align="center">
              <template slot-scope="scope">
                <div class="vip-info">
                  <div class="name-phone">
                    <div v-if="scope.row.name" class="name">{{ scope.row.name.split("-")[0] }}</div>
                    <div v-if="scope.row.name" class="phone">{{ scope.row.name.split("-")[1] }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('message.hyklx')"
              prop="cardType"
              min-width="120"
            />
            <el-table-column
              align="center"
              :label="$t('message.ye')"
              prop="amot"
              min-width="140"
            />
            <el-table-column align="center" :label="$t('message.status')" min-width="100">
              <template slot-scope="scope">
                {{
                  scope.row.status == "1"
                    ? $t('message.qy')
                    : scope.row.status == "0"
                      ? $t('message.jy') : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('message.createTime')"
              prop="creatTime"
              min-width="200"
              align="center"
              sortable
            />
          </el-table>
          <div class="flex-cc doumee-pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :current-page.sync="filters.page"
              hide-on-single-page
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.qydd')" name="2">
          <el-table
            ref="orderList"
            v-loading="orderListLoading"
            :data="orderList"
            element-loading-text="Loading"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <el-table-column
              align="center"
              :label="$t('message.qylx')"
              prop="payMethod"
              min-width="200"
            >
              <template slot-scope="scope">
                {{
                  scope.row.type == "1"
                    ? $t('message.shouchon')
                    : scope.row.type == "2"
                      ? $t('message.qianyue')
                      : $t('message.qianyue')
                }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('message.gly')"
              min-width="200"
              prop="admin"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              :label="$t('message.qyje')"
              prop="amot"
              min-width="200"
            />
            <el-table-column
              align="center"
              :label="$t('message.qysj')"
              prop="createDate"
              min-width="200"
            />
            <el-table-column
              align="center"
              :label="$t('message.hyklx')"
              prop="cardType"
              min-width="200"
            />
            <el-table-column
              align="center"
              :label="$t('message.jyzt')"
              prop="status"
              min-width="200"
            >
              <template slot-scope="scope">
                {{
                  scope.row.status == "0"
                    ? $t('message.dzf')
                    : scope.row.status == "1"
                      ? $t('message.zc')
                      : scope.row.status == "2"
                        ? $t('message.chexiao')
                        : $t('message.chexiao')
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('message.heton')" prop="htURL" min-width="200">
              <template slot-scope="scope">
                <span
                  class="hans"
                  @click="downLoadHt(scope.row.htURL)"
                >{{ $t('message.djxz') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('message.czr')"
              prop="creator"
              min-width="200"
            />
          </el-table>
          <div class="flex-cc doumee-pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="orderTotal"
              :current-page.sync="filters.orderPage"
              hide-on-single-page
              @current-change="handleOrderCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <!-- <div class="app-main-title">
      {{ $t('message.ttxq') }}
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{ $t('message.fhsyy') }}
      </div>
    </div> -->
    <el-dialog :title="$t('message.pldr')" :visible.sync="isShow" width="500px" center :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <el-upload
        ref="excel-upload-input"
        :action="uploadFileUrl"
        :on-change="onChanges"
        :data="uploadData"
        :auto-upload="true"
        accept=".xlsx, .xls"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-remove="removeFile"
        :file-list="fileList"
      >
        <el-button size="small" plain>{{ $t('message.xzwj') }}</el-button>
        <div slot="tip" class="el-upload__tip">
          {{ $t('message.znscbg') }}
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downLoad">{{ $t('message.xzmb') }}</el-button>
        <el-button v-preventReClick :loading="upLoading" type="primary" @click="submit">{{ $t('message.qr') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="$t('message.drxxcw')" :visible.sync="isError" width="30%" center :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <div v-for="(item, index) in errList" :key="index">{{ item }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button v-preventReClick type="primary" @click="close">{{ $t('message.qr') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  uploadFile,
  infoTeam,
  VIPInfo,
  orderListTeam,
  listTeamMember,
  importTeamMember,
  getTeamMemberTemplateExcel
} from '@/api'
import store from '@/store'
export default {
  name: 'GroupDetails',
  data() {
    return {
      isShowModal: false,
      teamId: '',
      modalDialog: store.getters.dialog,
      upLoading: false,
      meta: [],
      isShow: false,
      fileList: [],
      fileUrl: '',
      teamInfo: {},
      cardMessage: {},
      info: {},
      list: [],
      orderList: [],
      uploadData: {
        folder: 'PUBLIC_IMG',
        type: ''
      },
      isError: false,
      errList: [],
      uploadFileUrl: uploadFile,
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      orderTotal: 0,
      filters: {
        firstQueryTime: '',
        page: 1,
        orderPage: 1
      },
      listLoading: true,
      orderListLoading: true,
      activeName: '1'
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.listLoading = false
    this.orderListLoading = false
    this.filters.firstQueryTime = this.setTempDate()
    // this.getDetail()
    // this.getTeamMemberList()
  },
  methods: {
    setTempDate() {
      // 获取时间
      var myDate = new Date()
      return (
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate() +
        ' ' +
        myDate.getHours() +
        ':' +
        myDate.getMinutes() +
        ':' +
        myDate.getSeconds()
      )
    },
    goBack() {
      this.$router.replace('/vipList/groupList')
    },
    onChanges(file, list) {
      if (list.length > 1 && file.status !== 'fail') {
        list.splice(0, 1)
      } else if (file.status === 'fail') {
        list.splice(0, 1)
      }
    },
    getDetail(id) {
      infoTeam({ param: { id }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.teamInfo = res.record
          this.searchAction()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取团体会员列表
    getTeamMemberList(id) {
      listTeamMember({
        pagination: {
          firstQueryTime: this.filters.firstQueryTime,
          page: this.filters.page,
          rows: 10
        },
        param: {
          teamId: this.teamId,
          venueId: sessionStorage.getItem('venueId')
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          console.log(res)
          this.list = res.recordList
          this.total = res.totalCount
          const t = res.totalCount / 10
          const count = Number(t.toFixed(0)) + (t - t.toFixed(0) > 0 ? 1 : 0)
          this.total = count * 10
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取团体订单列表
    getTeamOrderList() {
      orderListTeam({
        pagination: {
          firstQueryTime: this.filters.firstQueryTime,
          page: this.filters.orderPage,
          rows: 10
        },
        param: {
          teamId: this.teamId,
          name: this.filters.name,
          orderId: this.filters.orderId,
          type: this.filters.type,
          venueId: sessionStorage.getItem('venueId')
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.orderList = res.recordList
            this.orderTotal = res.totalCount
            this.$refs.orderList.doLayout()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    searchAction() {
      VIPInfo({
        param: {
          phoneOrNo: this.teamInfo.adminPhone
        }
      })
        .then((res) => {
          // console.log(res)
          if (res.errorCode === '000000') {
            this.cardMessage = res.record
          }
        })
        .catch((err) => {
          console.log(err)
          this.cardMessage = {}
        })
    },
    handleCurrentChange(val) {
      // console.log(`当前页:`, val)
      this.filters.page = val
      this.getTeamMemberList()
    },
    handleOrderCurrentChange(val) {
      // console.log(`当前页:`, val)
      this.filters.orderPage = val

      this.getTeamOrderList()
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      if (this.activeName === '1') {
        this.getTeamMemberList()
      } else if (this.activeName === '2') {
        this.getTeamOrderList()
      }
    },
    inBatch() {
      this.removeFile()
      this.isShow = true
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      // console.log('成功', fileList)
      this.fileList = fileList
      this.fileUrl = file.response.showUrl
      console.log(this.fileUrl)
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      // console.log(this.$t('message.cw'))
      this.$notify.error({
        title: this.$t('message.cw'),
        message: this.$t('message.wjscsb')
      })
      console.log(err, file, fileList)
    },
    // 文件移除
    removeFile(file, fileList) {
      // console.log('移除')
      this.fileUrl = ''
    },
    downLoadHt(hturl) {
      if (!hturl) {
        this.$message.warning(this.$t('message.zwht'))
        return
      }
      window.open(hturl, '_blank')
    },
    downLoad() {
      getTeamMemberTemplateExcel({ param: {}})
        .then((res) => {
          // console.log(res)
          if (res.errorCode === '000000') {
            window.open(res.record, '_blank')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    submit() {
      // console.log('提交', this.fileList)
      if (this.fileUrl.length === 0) {
        this.$message.error(this.$t('message.qxxzwj'))
        return
      }
      // excelPath
      this.upLoading = true
      importTeamMember({
        param: {
          excelPath: this.fileUrl,
          teamId: this.teamId,
          venueId: sessionStorage.getItem('venueId')
        },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          this.upLoading = false
          // console.log(res)
          this.isShow = false
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.drcg'))
            this.getTeamMemberList()
            // this.uploadFileUrl = ''
            this.fileList = []
            if (res.record.errList.length) {
              this.errList = res.record.errList
              this.isError = true
            }
          }
        })
        .catch((err) => {
          this.upLoading = false
          console.log(err)
          this.getTeamMemberList()
        })
    },
    close() {
      this.isError = false
    },
    tke(e) {
      this.orderId = e.orderId
      this.show = true
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>
<style lang="scss" scoped>
.info_li {
  width: 33.33%;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  span {
    color: #666;
    display: inline-block;
  }
  .el-image {
    width: 100px;
    vertical-align: top;
    height: 100px;
  }
}
.hans {
  color: #435ebe;
  cursor: pointer;
}
</style>
